<template>
  <div class="component-container">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/bms-userList' }">用户列表</el-breadcrumb-item>
        <el-breadcrumb-item>用户详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="device-detail-content">
      <div class="content-item">
        <div class="component-title">
          <span><span class="title-breadcrumb">用户信息</span></span>
        </div>
        <div>
          <el-row>
            <!-- <el-col :span="8"><span>用户名：</span><span>{{userInfo.nickname}}</span></el-col> -->
            <el-col :span="8"><span>邮箱：</span><span>{{userInfo.email}}</span></el-col>
            <el-col :span="8"><span>性别：</span><span>{{userInfo.gender===0 ? '未知' : userInfo.gender===1 ? '男' : '女'}}</span></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><span>创建时间：</span><span>{{userInfo.created_at}}</span></el-col>
            <el-col :span="8"><span>最后登录时间：</span><span>{{userInfo.updated_at}}</span></el-col>
            <el-col :span="8"><span>登录方式：</span><span>{{userInfo.login_type_standard}}</span></el-col>
          </el-row>
        </div>
      </div>
      <div class="content-item">
        <div class="component-title">
          <span><span class="title-breadcrumb">设备绑定信息</span></span>
        </div>
        <div>
          <el-table :data="switchList" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="55"></el-table-column>
            <el-table-column prop="deviceName" label="设备名" min-width="200"></el-table-column>
            <el-table-column prop="nickName" label="设备昵称" min-width="200"></el-table-column>
            <el-table-column prop="productName" label="设备类型" min-width="150"></el-table-column>
            <el-table-column label="操作" min-width="150">
              <template slot-scope="scope"><el-button type="text" @click="goSwitchInfo(scope.row)">查看</el-button></template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      switchList: [],
      userInfo: {},
      loading: true,
    };
  },
  components: {},
  mounted () {
    this.userInfo = JSON.parse(this.$route.query.userInfo)
    this.getSwitchList()
  },
  methods: {
    //查询用户的设备
    async getSwitchList() {
      this.loading = true;
      let { data: res } = await this.$http.post("bms/user/devices", { identityId : this.userInfo.identity_id });
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      this.switchList = res.data;
      this.loading = false;
    },
    goSwitchInfo(row) {
      this.$router.push({path: '/bms-switchDetail', query: { iotId: row.iotId, gateway: row.productKey === "a25c34Wbg4I" ? true : false }});
    },
  }
}
</script>

<style lang='scss' scoped>
.component-container {
  min-width: 1000px;
  height: calc(100vh - 50px);
  color: #333333;
  .nav {
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    display: flex;
    align-items: center;
  }
  .device-detail-content {
    .component-title {
      font-size: 12px;
      color: rgb(102, 102, 102);
      padding: 20px 0;
      position: relative;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #bac8cf;
        }
      }
      .condition-right {
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
    .content-item {
      background-color: #FFF;
      padding: 0 20px 20px;
      border-top: 1px solid #DCDFE6;
      .el-row {
        background-color: #f5f5f6;
        padding: 16px;
      }
    }
  }
}
</style>